﻿<UserControl x:Class="Demos.Common.Util.ColorPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="Auto" Height="Auto" 
    xmlns:selectable="clr-namespace:Demos.Common.Util"
    MouseLeftButtonUp="TurnEverythingOff">
    <UserControl.Resources>

        <Style x:Key="ColorPickerTextBoxStyle" TargetType="TextBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Grid x:Name="RootElement">
                            <Grid.Resources>
                                <Storyboard x:Key="Normal State"/>
                                <Storyboard x:Key="Focused State"/>
                            </Grid.Resources>
                            <Border BorderBrush="#FFA4A4A4" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" Background="{TemplateBinding Background}">
                                <ScrollViewer x:Name="ContentElement"
									BorderThickness="0" 
									Padding="{TemplateBinding Padding}" Height="Auto" Width="Auto" 
									/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Border Height="Auto" Width="Auto" 
            Background="#FF6B6A6A" 
            BorderBrush="#FF434343" 
            BorderThickness="1,1,1,1" 
            CornerRadius="8,8,0,0" 
            x:Name="RootControl">
        <Grid x:Name="LayoutRoot" Height="Auto" Width="Auto" Margin="4,4,4,4" >
            <Grid.RowDefinitions>
                <RowDefinition x:Name="colorRow" Height="*" MinHeight="50" />
                <RowDefinition Height="Auto" MinHeight="0"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="colorColumn" Width="*" MinWidth="50"/>
                <ColumnDefinition x:Name="rightColumn" Width="Auto" MinWidth="90"/>
            </Grid.ColumnDefinitions>
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="1" Width="Auto" Grid.Row="0" Orientation="Vertical" x:Name="LargePanel">
                <Border Height="Auto" Width="Auto" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8" BorderBrush="#FFFFFFFF" Margin="2,2,2,2">
                    <StackPanel Margin="4,0,0,0">
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="R:" TextWrapping="Wrap" Foreground="#FFFFFFFF"/>
                            <TextBlock Text="255" TextWrapping="Wrap" Foreground="#FFFFFFFF" Margin="4,0,0,0" x:Name="RedText"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="G:" TextWrapping="Wrap" Foreground="#FFFFFFFF"/>
                            <TextBlock Text="255" TextWrapping="Wrap" Foreground="#FFFFFFFF" Margin="4,0,0,0" x:Name="GreenText"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" >
                            <TextBlock Text="B:" TextWrapping="Wrap" Foreground="#FFFFFFFF"/>
                            <TextBlock Text="255" TextWrapping="Wrap" Foreground="#FFFFFFFF" Margin="4,0,0,0" x:Name="BlueText"/>
                        </StackPanel>
                    </StackPanel>
                </Border>
                <Border Height="Auto" Width="Auto" 
                        BorderBrush="#FFFFFFFF" 
                        BorderThickness="1,1,1,1" 
                        CornerRadius="8,8,8,8" 
                        Margin="2,2,2,2">
                    <StackPanel Margin="2,2,2,2">
                        <TextBlock Height="Auto" 
                                   Width="Auto" 
                                   Text="Copy RGB:" 
                                   TextWrapping="Wrap" 
                                   Foreground="#FFFFFFFF" 
                                   FontSize="12" 
                                   Margin="2,2,2,2"/>
                        <selectable:ClickTextBox x:Name="CopyColorText" 
                                 Text="255,255,255" 
                                 Foreground="#FFFFFFFF"  
                                 Height="Auto"
                                  
                                 Background="#FF333333" 
                                 Width="Auto" 
                                 Margin="0,0,0,2"  />
                    </StackPanel>
                </Border>

                <Border Height="Auto" 
                        Width="Auto" 
                        BorderBrush="#FFFFFFFF" 
                        BorderThickness="1,1,1,1" 
                        CornerRadius="8,8,8,8" 
                        Margin="2,2,2,2">
                    <StackPanel Margin="2,2,2,2">
                        <TextBlock Height="Auto" 
                                   Margin="2,2,2,2" 
                                   Width="Auto" 
                                   FontSize="12" 
                                   Foreground="#FFFFFFFF" 
                                   Text="Copy Hex:" 
                                   TextWrapping="Wrap"/>
                        <selectable:ClickTextBox x:Name="CopyHexText" 
                                 Text="#FFFFFFFF" 
                                 Foreground="#FFFFFFFF"  
                                 Height="Auto" 
                                 Width="Auto" 
                                 Background="#FF333333"
                               
                                 Margin="2,2,2,2"  />
                    </StackPanel>
                </Border>

            </StackPanel>
            <Grid Grid.RowSpan="1" Grid.ColumnSpan="1" Margin="0,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.85*" MinHeight="100"/>
                    <RowDefinition Height="0.15*" MaxHeight="60" MinHeight="10"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.85*" MinWidth="100"/>
                    <ColumnDefinition Width="0.15*" MaxWidth="60" MinWidth="20"/>
                </Grid.ColumnDefinitions>
                <Canvas HorizontalAlignment="Stretch" 
					x:Name="BackgroundCanvas"
					Margin="1,1,1,1" 
					VerticalAlignment="Stretch"  
					Background="#FFFF0000" Grid.ColumnSpan="1" 
                    Grid.RowSpan="1" Grid.Column="0"/>
                <Canvas Margin="1,1,1,1">
                    <Canvas.Background>
                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                        </LinearGradientBrush>
                    </Canvas.Background>
                </Canvas>
                <Canvas x:Name="ColorCanvas"
                    MouseLeftButtonUp="Canvas_MouseLeftButtonUp"
					MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
					MouseMove="Canvas_MouseMove"
					MouseLeave="Canvas_MouseLeave" 
                    SizeChanged="ColorCanvas_SizeChanged"
                    Margin="1,1,1,1">
                    <Canvas.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF000000" Offset="1"/>
                            <GradientStop Color="#00000000" Offset="0"/>
                        </LinearGradientBrush>
                    </Canvas.Background>
                    <Grid x:Name="FinalColor"
						Height="12" Width="12" 
						Canvas.Left="-6" Canvas.Top="-6">
                        <Ellipse Stroke="#FFFFFFFF" StrokeThickness="3"/>
                        <Ellipse Stroke="#FF000000" Margin="1,1,1,1"/>
                    </Grid>
                </Canvas>
                <Border Height="Auto" HorizontalAlignment="Stretch" 
                        Margin="2,2,2,2" x:Name="resultCanvas" 
                        VerticalAlignment="Stretch" Grid.ColumnSpan="2" 
                        BorderBrush="#FF000000" BorderThickness="1,1,1,1" 
                        CornerRadius="6,6,6,6" Grid.Row="1" 
                        Background="#FFFFFFFF"/>
                <Border Margin="1,1,1,1" 
                        Grid.Column="1" 
                        BorderBrush="#FF262626" 
                        BorderThickness="1,1,1,1" 
                        CornerRadius="6,6,6,6" 
                        x:Name="RainbowBorder" 
                        MouseLeftButtonDown="RainbowBorder_TurnOn" 
                        MouseLeftButtonUp="RainbowBorder_TurnOff" 
                        MouseMove="RainbowBorder_UpdateHue">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFFF0000"/>
                            <GradientStop Color="#FFFFFF00" Offset="0.16666"/>
                            <GradientStop Color="#FF00FF00" Offset="0.33332"/>
                            <GradientStop Color="#FF00FFFF" Offset="0.5"/>
                            <GradientStop Color="#FF0000FF" Offset="0.66666"/>
                            <GradientStop Color="#FEFF00FF" Offset="0.83333"/>
                            <GradientStop Color="#FFFF0000" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Canvas x:Name="HueCanvas"
                            SizeChanged="HueCanvas_SizeChanged"
                            >
                        <Grid Margin="0,0,0,0"
                              x:Name="RainbowHandle" 
                              Height="10" 
                              Background="#00FFFFFF"
                              HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.33*"/>
                                <ColumnDefinition Width="0.33*"/>
                                <ColumnDefinition Width="0.33*"/>
                            </Grid.ColumnDefinitions>
                            <Path HorizontalAlignment="Stretch" 
        					    Margin="1,2,0,2" 
        					    VerticalAlignment="Stretch" 
        					    Fill="#FF000000" 
        					    Stretch="Fill" 
        					    Stroke="#FF000000" 
        					    Data="M0,0 L13,5.5 L0,10 z" 
                                  StrokeStartLineCap="Round" 
                                  StrokeEndLineCap="Round" 
                                  StrokeDashCap="Round" StrokeLineJoin="Round"/>
                            <Path HorizontalAlignment="Stretch" 
        					    Margin="0,2,1,2" 
        					    VerticalAlignment="Stretch" 
        					    Grid.Column="2" 
        					    Fill="#FF000000" 
        					    Stretch="Fill" 
        					    Stroke="#FF000000" 
        					    Data="M40,0 L25,5 L40,10 z" 
        					    StrokeDashCap="Round" 
        					    StrokeLineJoin="Round"/>
                            <Border Grid.ColumnSpan="3" 
                                    BorderThickness="1,1,1,1" 
                                    CornerRadius="3,3,3,3" 
                                    BorderBrush="#FF000000"/>
                        </Grid>
                    </Canvas>

                </Border>
            </Grid>
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" 
                        VerticalAlignment="Stretch" Width="Auto" 
                        Orientation="Vertical" 
                        x:Name="CompactPanel" 
                        Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="1"
                        Visibility="Collapsed">
                <selectable:ClickTextBox x:Name="CompactRGBText" 
                                         Text="255,255,255" 
                                         Foreground="#FFFFFFFF" 
                                         Height="Auto"
                                         
                                         Background="#FF333333" 
                                         Width="Auto" 
                                         Margin="2,2,2,2"  />
                <selectable:ClickTextBox x:Name="CompactHexText" 
                                         Foreground="#FFFFFFFF" 
                                         Height="Auto"
                                    
                                         Background="#FF333333" 
                                         Width="Auto" 
                                         Margin="2,2,2,2"  />
            </StackPanel>
        </Grid>
    </Border>
</UserControl>

